<div class="page-header">
  <h1>Blockly Page</h1>
  <p>This is an alternative Blockly editor page with a different URL</p>
</div>

<div class="container">
  <div class="blockly-wrapper">
    <app-blockly [importVariableCallback]="openVariableModal"></app-blockly>
  </div>

  <div class="code-container">
    <h3>Generated JavaScript Code:</h3>
    <pre id="blocklyCodeOutput"></pre>
    <div class="button-group">
      <button class="btn primary" (click)="generateCode()">Generate Code</button>
      <button class="btn" (click)="saveWorkspace()">Save</button>
      <button class="btn" (click)="exportWorkspace()">Export</button>
      <button class="btn" (click)="importWorkspace()">Import</button>
      <input
        type="file"
        #fileInput
        style="display: none"
        (change)="handleFileInput($event)"
        accept=".xml"
      />
    </div>
  </div>
</div>

<div class="variable-modal" [ngClass]="{'show-modal': showVariableModal}">
  <div class="modal-content">
    <div class="modal-header">
      <h2>u9009u62e9u7cfbu7edfu53d8u91cf</h2>
      <span class="close-button" (click)="closeVariableModal()">&times;</span>
    </div>
    <div class="modal-body">
      <div class="search-container">
        <input type="text" placeholder="u641cu7d22u53d8u91cf..." [(ngModel)]="variableSearchTerm" (input)="filterVariables()">
      </div>
      <div class="variable-list">
        <div *ngFor="let variable of filteredSystemVariables" 
             class="variable-item" 
             (click)="selectVariable(variable)">
          {{variable.name}}
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn" (click)="closeVariableModal()">u53d6u6d88</button>
      <button class="btn save-btn" (click)="importSelectedVariable()">u5f15u5165</button>
    </div>
  </div>
</div>
